<template>
  <div class="main-container container">
    <div class="main">
      <!-- 热门分类 -->
      <div class="hot_category">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane class="categoryItem" v-for="(item, index) in categoryList" :name="index + ''" :key="index">
            <span slot="label">
                <i :class="item.icon"></i>
                {{ item.label }}
            </span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="content">
        <!-- 左侧内容 -->
        <div style="width: 100%;">
          <div class="articleBox" v-if="articleList.length > 0">
            <el-card class="articleItem box-shadow-top" v-for="(item, index) in articleList" :key="item.id">
              <div class="articleInfo">
                <div class="articleInfo-item">
                    <div>
                          <router-link :to="'/article/' + item.id">
                              <h3 class="xiahuaxian">{{ item.name }}</h3>
                          </router-link>
                        <p>
                            {{ item.description }}
                        </p>
                    </div>
                    <router-link :to="'/article/' + item.id">
                        <div class="articleImgBox" style="">
                            <img class="articleImg" v-lazy="item.cover" :key="item.cover">
                        </div>
                    </router-link>
                </div>

              </div>
              <div class="bottumItem">
                <div class="articleOhter">
                <span class="item">
                    <i class="el-icon-time"></i>{{ parseTime(item.createTime) }}
                </span>
                </div>
              </div>
            </el-card>
            <!-- 分页按钮 -->
              <div>
                  <sy-pagination :pageNo="pageData.pageNo" :pages="pages" @changePage="handlePage" />
              </div>
          </div>
          <sy-empty v-else message="很抱歉，暂无空间" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchArticleList, featchCategory } from '@/api'
import {parseTime} from "@/utils";
export default {
  components: {
    // SiteInfo,
    // Notcie
  },
  name: 'Home',

  data() {
    return {
      centerDialogVisible: false,
      drawer: false,
      emojis: [],
      pageData: {
        pageNo: 1,
        pageSize: 10,
        category: 0,
          status: 0
      },
      activeName: "0",
      bannerList: [],
      categoryList: [
          {
              id: null,
              label: "最新",
              value: null,
              icon: "el-icon-news",
              desc: "create_time"
          },
          {
              id: null,
              label: "最热",
              value: null,
              icon: "el-icon-tableware",
              desc: "quantity"
          }

      ],
      articleList: [],
      pages: 0,
      tagList: [],
      newArticleList: [],
      tagStyle: ['', 'success', 'info', 'warning', 'danger'],
      sayList: [],
      currentIndex: 0,
      timer: null,

    };
  },
  created() {
      this.fetchCategoryList()
    this.fetchArticleList()
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
      parseTime,
    handleToUserMain(userId) {
      this.$router.push({ path: "/user_main", query: { id: userId } })
    },
    stop() {
      clearInterval(this.timer);
    },
    start() {
      clearInterval(this.timer);
      if (this.sayList.length > 1) {
        this.timer = setInterval(() => {
          this.currentIndex++;
          if (this.currentIndex > this.sayList.length - 1) {
            this.currentIndex = 0
          }
        }, 3500)
      }
    },
    openUserInfoDrawer(value) {
      this.$store.state.userInfoDrawer.flag = true;
      this.$store.state.userInfoDrawer.name = value;
    },
    handleClike(id, path) {
      this.$router.push({ path: path, query: { id: id } })
    },
    handleTabClick(tab) {
      let item = this.categoryList[tab.index]
      this.pageData.pageNo = 1
      this.pageData.category = item.value
      fetchArticleList(this.pageData).then(res => {
        this.articleList = res.data.list;
        this.pages = res.data.pages

      })
    },
    handleLogin() {
      this.$store.state.loginFlag = true
    },
    // 分页
    handlePage(val) {
      this.pageData.pageNo = val;
      this.fetchArticleList()
    },
    fetchArticleList() {
      this.$bus.$emit('show');
      fetchArticleList(this.pageData).then(res => {
        this.articleList.push(...res.data.list);
        this.pages = res.data.pages
        this.$bus.$emit('close')
      }).catch(err => {
        this.$bus.$emit('close')
      })
    },
    fetchCategoryList() {
      featchCategory({type: "space_category"}).then(res => {
        this.categoryList.push(...res.data)
      })
    },
  },
}
</script>

<style lang="scss" scoped >
/deep/ .el-tabs__item {
  color: var(--article-color);
}

/deep/ .is-active {
  color: #409EFF;
}

/deep/ .el-tabs__nav-wrap::after {
  background-color: var(--background-color);
}

/deep/ .el-tabs__active-bar {
  background-color: var(--theme-color);
}

/deep/ .el-dialog {
  background-color: rgba(0, 0, 0, .5);
  border-radius: 10px;

  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
    }
  }

  .el-dialog__body {
    background-color: rgb(140, 140, 140);

  }

  .conent {
    text-align: center;
  }

  .footer-item {
    color: #fff;
  }
}

.banner {
  position: relative;
  height: 420px;


  /deep/ .el-carousel__container {
    height: 100%;
  }

  .title {
    position: absolute;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 100%;
    bottom: 50px;
    color: #fff;
    background: rgba(0, 0, 0, .3);
    z-index: 1;
  }

  .bannerImg {
    width: 100%;
    height: 100%;
  }
}


.main-container {

  @media screen and (max-width: 1118px) {
    padding-left: 10px;
    padding-right: 10px;

    .top-right,
    .rightBox,
    .articleImg {
      display: none;
    }

    .main {
      width: 100%;

      .bannerBox {
        width: 100%;

        .banner {
          height: 200px;
          border-radius: 5px;
        }
      }

      .articleInfo-item {
        width: 95%;

      }
    }
  }

  @media screen and (min-width: 1119px) {
    .main {
      width: 65%;

      .bannerBox {
        width: 70%;

        /deep/ .banner {
          border-radius: 5px;
        }
      }


      .articleImgBox {
        width: 180px;
        height: 110px;
        overflow: hidden;
        border: 1px solid var(--border-line);
        border-radius: 5px;
        margin-left: auto;

        &:hover .articleImg {
          transform: scale(1.1);
        }

        .articleImg {
          width: 100%;
          height: 100%;
          transition: all 0.5s;
        }
      }

      .top-right {
        display: inline-block;
        width: 30%;
        height: 420px;
        margin-left: 20px;

        /deep/ .el-image {
          width: 100%;
          height: 47%;
          cursor: url(https://qiniu.chengke.net/link.cur), pointer;

          &:last-child {
            margin-top: 20px;
          }
        }

        /deep/ .wh_content_all {
          background-color: var(--theme-color);
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;

        }

      }
    }
  }

  .main {
    margin-top: 80px;
    .main-box {
      width: 100%;
      display: flex;
    }

    .hot_category {
      margin-top: 30px;

      /deep/ .el-tabs__item:hover span {
        color: #409EFF;
      }
    }


    .content {
      display: flex;

      .articleBox {
        font-size: 1rem;
        width: 100%;
        .articleItem {
          width: 48%; /* 设置卡片的宽度为父容器的一半 */
          margin-right: 2%; /* 设置右边距 */
          display: inline-block; /* 使用行内块级元素布局，使得卡片可以在同一行显示 */
          position: relative;
          padding: 10px 5px 10px 15px;
          background-color: var(--background-color);
          margin-bottom: 20px;
          .articleInfo {
            color: var(--article-color);
            .articleInfo-item {
              display: flex;
              height: 100px;
              justify-content: space-between;
              a {
                color: var(--article-color);
              }
              .top {
                background-image: -webkit-linear-gradient(0deg, #3ca5f6 0, #a86af9 100%);
                padding-left: 5px;
                padding-right: 5px;
                display: inline-block;
                border-top-right-radius: 5px;
                border-bottom-left-radius: 5px;
                font-size: 0.9rem;
                margin-right: 5px;
                color: #fff;
              }

              h3 {
                cursor: pointer;
                position: relative;
                display: inline-block;
              }

              p {
                margin-top: 10px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
              }
            }

          }
          .bottumItem {
            align-items: center;
            display: flex;
            margin-top: 20px;
            flex-wrap: wrap;
          }

        }

      }


    }
  }

}
/* 如果需要在小屏幕上显示一行一个卡片，则可以使用媒体查询 */
@media (max-width: 768px) {
  .articleItem {
    width: 100%; /* 在小屏幕下设置卡片宽度为100%，一行只显示一个卡片 */
    margin-right: 0; /* 取消右边距 */
  }
}
</style>
